<template>
  <!-- 购物车头部 -->
  <div class="cart-header">
    <div class="cart-header-title">
      {{ title }}
    </div>
    <div class="cart-header-step">
      <el-steps :active="activeIndex" simple>
        <el-step title="1. 我的购物车" icon="el-icon-edit"></el-step>
        <el-step title="2. 填写订单" icon="el-icon-edit"></el-step>
        <el-step title="3. 完成订单" icon="el-icon-edit"></el-step>
      </el-steps>
    </div>
  </div>
  <!-- 列表 -->
</template>

<script>
export default {
  props: ['title', 'activeIndex'],
  data() {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  color: #777;
  overflow: hidden;
  .cart-header-title {
    font-weight: bold;
    font-size: 28px;
  }
  .cart-header-step {
    .el-steps--simple {
      padding: 5px;
      height: 46px;
      width: 560px;
      border-radius: 0px;
    }
  }
}
</style>
